<template>
  <div>
    <el-card>
      <div slot="header">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>评论管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-table border stripe :data="commentsList" style="width: 100%">
        <el-table-column prop="title" label="标题">
        </el-table-column>
        <el-table-column prop="total_comment_count" label="总评论数">
        </el-table-column>
        <el-table-column prop="fans_comment_count" label="粉丝评论数">
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope='scope'>
            {{scope.row.comment_status? '正常' :'否'}}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.comment_status" :disabled="scope.row.isDisable" @change="onStatusChange(scope.row)" active-color="#13ce66" inactive-color="#ff4949">
            </el-switch>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-sizes="[10,13,15,20,30]" :page-size="queryInfo.per_page" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { getArticles, updateCommentStatus } from '@/api/user.js'
export default {
  data() {
    return {
      commentsList: [],
      queryInfo: {
        response_type: 'comment',
        per_page: 10,
        page: 1
      },
      total: 0
    }
  },
  created() {
    this.loadGetArticle()
  },
  methods: {
    loadGetArticle() {
      getArticles(this.queryInfo)
        .then(res => {
          const Result = res.data.data.results
          Result.forEach(item => {
            item.isDisable = false
          })
          this.commentsList = Result
          this.total = res.data.data.total_count
        })
        .catch(err => err)
    },
    onStatusChange(row) {
      row.isDisable = true
      updateCommentStatus(row.id.toString(), row.comment_status)
        .then(res => {
          row.isDisable = false
          this.$message.success(!row.comment_status ? '关闭评论成功' : '打开评论成功')
          this.loadGetArticle()
        })
        .catch(err => err)
    },
    handleSizeChange(size) {
      this.queryInfo.per_page = size
      this.queryInfo.page = 1
      this.loadGetArticle()
    },
    handleCurrentChange(page) {
      this.queryInfo.page = page
      this.loadGetArticle()
    }
  }
}
</script>
<style scoped>
.el-pagination {
  margin-top: 15px;
}
</style>
